<div id="carousel-container" class="carousel slide">
	<ol class="carousel-indicators">
		{php $slideNum = 0;}
		{loop $addata $row}
		<li data-target="#carousel-container" data-slide-to="{$slideNum}"{if $slideNum == '0'} class="active"{/if}></li>
		{php $slideNum++;}
		{/loop}
	</ol>

	<div class="carousel-inner" role="listbox"> 
		{loop $addata $row}
		<div class="item{if $addata[0] == $row} active{/if}">
			<a href="{if $row['adurl']!=''} {$row['adurl']} {else}javascript:;{/if}">
				<img src="{media $row['adimg']}" title="{$row['adtitle']}" style="width:100%; vertical-align:middle;">
			</a>
			<div class="carousel-caption">
				{$row['adtitle']}
			</div>
		</div>
		{/loop}
	</div>
</div>
<script>
	require(['bootstrap', 'hammer'], function($, Hammer){
		$('#carousel-container').carousel();
		var mc = new Hammer($('#carousel-container').get(0));
		mc.on("panleft", function(ev) {
			$('#carousel-container').carousel('next');
		});
		mc.on("panright", function(ev) {
			$('#carousel-container').carousel('prev');
		});
	});
</script>
<style>
.slide { position: relative; }
.carousel-indicators { position: absolute; left: 50%; z-index: 1; bottom: 2px; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; }
.carousel-indicators li { display: inline-block; width: 5px; height: 5px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000 \9; background-color: rgba(0,0,0,0); border: 1px solid #fff; border-radius: 10px; }
.carousel-indicators .active { width: 6px; height: 6px; margin: 0; background-color: #fff; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-inner>.item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left; }
.carousel-inner>.active.left { left: -100%; }
.carousel-inner>.active, .carousel-inner>.next, .carousel-inner>.prev { display: block; }
}
.carousel-inner { position: relative; width: 100%; overflow: hidden }
.carousel-inner>.item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left }
.carousel-inner>.item>img, .carousel-inner>.item>a>img { line-height: 1 }
.carousel-inner>.active, .carousel-inner>.next, .carousel-inner>.prev { display: block }
.carousel-inner>.active { left: 0 }
.carousel-inner>.next, .carousel-inner>.prev { position: absolute; top: 0; width: 100% }
.carousel-inner>.next { left: 100% }
.carousel-inner>.prev { left: -100% }
.carousel-inner>.next.left, .carousel-inner>.prev.right { left: 0 }
.carousel-inner>.active.left { left: -100% }
.carousel-inner>.active.right { left: 100% }
. .carousel-inner>.item>img, .carousel-inner>.item>a>img {
 line-height: 1;
}
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img { display: block; width: 100% \9; max-width: 100%; height: auto; }
.carousel-caption { position: absolute; right: 15%; left: 15%; z-index: 1; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); bottom: 15px; font-size: 0.8em; padding-top: 0px; padding-bottom: 0px; }


</style>